<template>
    
    <div class="app__middle">
        <Nav :title="title" />
        <div class="banner">
            <Banner :show="false" :images="images" :width="'100%'" :height="'150px'"/>
        </div>
        <CateNav :cateNav="cateNav" />
        <div class="app__img">
            <Img :imgSrc="'https://img.yzcdn.cn/vant/cat.jpeg'" />
        </div>
        <Case />
        <van-notice-bar
            scrollable
            background="#fff"
            left-icon="volume-o"
            text="恭喜你中奖了 华为P30 pro是你的了"
        />

        <van-divider />

        <div class="app__middle--h2">
            <h2>精选好物</h2>
            <span>选你所选</span>
        </div>
        <GoodList :goods="this.goods[0]"/>

        <div class="app__middle--h2">
            <h2>特色频道</h2>
            <span>专属定制</span>
        </div>

        <div class="app__middle--img">
            <div>
                <Img :imgSrc="'https://img.yzcdn.cn/vant/cat.jpeg'" />
            </div>
            <div>
                <Img :imgSrc="'https://img.yzcdn.cn/vant/cat.jpeg'" />
            </div>
            <div>
                <Img :imgSrc="'https://img.yzcdn.cn/vant/cat.jpeg'" />
            </div>
            <div>
                <Img :imgSrc="'https://img.yzcdn.cn/vant/cat.jpeg'" />
            </div>
        </div>

        <!-- <van-loading type="spinner" v-if="goods.length === 0" /> -->
        <Goods :goods="goods" v-if="goods" />
    </div>
</template>

<script>
import Banner from "../components/Banner";
import CateNav from "../components/Cate/cate-nav";
import Img from "../components/Img";
import Case from "./case";
import axios from "../plugins/axios";
import Goods from "../components/goodList/goods";
import GoodList from "../components/goodList/good-list"
export default {
    name: "",
    async beforeRouteEnter(to, from, next) {
        let navList = await axios("http://114.215.127.46:3333/api/nav");
        let goods = await axios("http://114.215.127.46:3333/api/goods");
        to.query.navList = navList.data.data;
        to.query.goods = goods.data.data;
       
        next();
    },
    data() {
        return {
            title: ["推荐", "手机数码", "健康生活", "电子票券", "家用电器"],
            images: [
                "./images/banner1.jpg",
                "./images/banner1.jpg",
                "./images/banner1.jpg"
            ],
            cateNav: this.$route.query.navList,
            goods: []
        };
    },
    props: {},
    methods: {},
    components: {
        Banner,
        CateNav,
        Img,
        Case,
        Goods,
        GoodList
    },
    mounted() {
        let count = this.$route.query.goods.length;
        for (let i = 0; i < Math.ceil(count / 3); i++) {
            this.goods.push(this.$route.query.goods.splice(0, 3));
        }

    },
    updated() {}
};
</script>

<style scoped>
.home {
    background: #f3f1f1;
}
div {
    box-sizing: border-box;
}
.app__middle {
    margin-bottom: 50px;
    padding: 10px;
}
.banner {
    margin: 10px 10px 20px;
    border-radius: 5px;
    overflow: hidden;
}

.app__middle--h2 {
    display: flex;
    width: 100%;
}
.app__middle--h2 h2 {
    height: 25px;
    font-size: 20px;
    line-height: 25px;
    padding: 0;
    margin: 0;
    margin-left: 20px;
}
.app__middle--h2 span {
    font-size: 12px;
    line-height: 28px;
    margin-left: 5px;
    color: rgb(196, 198, 194);
}
.app__middle--img {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 10px 0;
}
.app__middle--img > div {
    width: 49%;
    height: 100px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 5px;
}
</style>
